<template>
	<view>
		<uni-section >
			<uni-grid :column="calculateColumns()" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in list" :key="index" @click="navigateToDetails(item)">
					<slot name="image-slot">
						<image :src="item.url" class="image" mode="aspectFit" />
					</slot>
					<text class="text">{{ item.text }}</text>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
	</view>
</template>
	<script>
		export default {
			data() {
				return {
					list: [{
							url: '/static/logo.png',
							text: 'Grid 1',
						},
						{
							url: '/static/logo.png',
							text: 'Grid 2',
						},
						{
							url: '/static/logo.png',
							text: 'Grid 3',
						},
						{
							url: '/static/logo.png',
							text: 'Grid 4',
						},
						{
							url: '/static/logo.png',
							text: 'Grid 5'
						},
						{
							url: '/static/logo.png',
							text: 'Grid 6'
						},
						{
							url: '/static/logo.png',
							text: 'Grid 7'
						},
						{
							url: '/static/logo.png',
							text: 'Grid 8'
						},
						{
							url: '/static/logo.png',
							text: 'Grid 9'
						}
					]
				}
			},
			methods: {
				calculateColumns() {
					// 假设逻辑根据屏幕宽度动态计算列数
					const screenWidth = uni.getSystemInfoSync().windowWidth;
					return screenWidth > 768 ? 4 : 2; // 示例逻辑，请根据实际需求调整
				},
				navigateToDetails(item) {
					// uni.navigateTo({
					// 	url: `/pagesThree/FoodDetails/FoodDetails?itemId=${item.id}`, // 假设每个item有id属性
					// });
					console.log(111)
				},
				change(event) {
					// 处理grid变化的逻辑
				},
			},
		}
	</script>

	<style lang="scss">
		.image {
			width: 100%;
			height: auto; // 修改为auto以适应mode="aspectFit"
		}

		.text {
			font-size: 14px;
			margin-top: 5px;
		}
	</style>